import { defineComponent } from 'vue';
import { getStudy } from "@/api/home"
import SheltV2 from '../../common/SheltV2';
import "./index.less"


export default defineComponent({
    name: 'Study',
    setup() {

        const data = ref({}) as AnyObject;
        const userId = computed(()=>useStore().state.dingdingInfo.ding_userid);
        getStudy().then(res => {
            data.value = res.data;
            console.log(data.value);
        })
        const viewDetail = () => {
            window.open(`http://112.74.53.253:9527/#/index?userId=${userId.value}`, "_blank");
        }

        return () => (
            <SheltV2 title='我的学习' more="去学习" onViewDetail={viewDetail}>
                <div class="study">
                    <div class="course_info flex-start">
                        <a href={`http://112.74.53.253:9527/#/m_courseInfo/index?userId=${userId.value}`} target='_blank' class="course_item hover-color"><div class="title">已学课程</div>
                            <div class="num">{data.value.study_finish}</div></a>
                        <a href={`http://112.74.53.253:9527/#/m_courseInfo/index?userId=${userId.value}`} target='_blank' class="course_item hover-color"><div class="title">待学课程</div>
                            <div class="num">{data.value.need_study_count}</div></a>
                        <a href={`http://112.74.53.253:9527/#/my/exam?userId=${userId.value}`} target='_blank' class="course_item hover-color"><div class="title">待考试</div>
                            <div class="num">{data.value.need_exam_count}</div></a>
                    </div>
                    <div class="study_long flex-between">
                        <div class="title">学习时长</div>
                        <div class="duration">{data.value.video_time}</div>
                    </div>
                </div>
            </SheltV2>
        );
    }
});
